<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>项目列表</title>
{#    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/css/bootstrap.min.css" rel="stylesheet">#}
{#    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.11.1/font/bootstrap-icons.min.css" rel="stylesheet">#}
{#    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>#}
{#    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.bundle.min.js"></script>#}

    <link href="{{ url_for('static',filename='bootstrap/css/bootstrap.min.css') }}" rel="stylesheet">
    <link href="{{ url_for('static',filename='bootstrap/bootstrap-icons-1.11.1/bootstrap-icons.min.css') }}" rel="stylesheet">
    <script src="{{ url_for('static',filename='jquery/jquery-3.7.1.min.js') }}"></script>
    <script src="{{ url_for('static',filename='bootstrap/js/bootstrap.bundle.min.js') }}"></script>
    <style>
        :root {
            --primary-color: #2E7D32;
            --secondary-color: #81C784;
            --accent-color: #DCEDC8;
            --text-color: #212121;
            --light-text: #757575;
        }

        body {
            background-color: #F5F5F5;
            color: var(--text-color);
            padding: 1.5rem;
        }

        .page-header {
            margin-bottom: 1.5rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .page-title {
            color: var(--primary-color);
            font-weight: 600;
            font-size: 1.8rem;
            margin-bottom: 0;
        }

        .btn-add-project {
            background-color: var(--primary-color);
            border-color: var(--primary-color);
            padding: 0.5rem 1rem;
        }

        .btn-add-project:hover {
            background-color: #1B5E20;
            border-color: #1B5E20;
        }

        .project-card {
            transition: all 0.3s ease;
            border-left: 4px solid var(--secondary-color);
            margin-bottom: 1rem;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            height: 100%; /* 确保卡片占满整个高度 */
        }

        .card-body {
            flex: 1; /* 让卡片内容区域自动占据可用空间 */
        }

        .project-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        .project-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 0.5rem;
        }

        .project-title {
            font-weight: 600;
            color: var(--primary-color);
            margin-bottom: 0;
            font-size: 1.2rem;
        }

        .project-info {
            display: flex;
            color: var(--light-text);
            font-size: 0.9rem;
        }

        .project-info-item {
            margin-right: 1.5rem;
            display: flex;
            align-items: center;
        }

        .project-info-item i {
            margin-right: 0.3rem;
            font-size: 0.95rem;
        }

        .project-actions {
            display: flex;
            gap: 0.5rem;
        }

        .btn-action {
            padding: 0.25rem 0.5rem;
            font-size: 0.875rem;
        }

        .empty-state {
            text-align: center;
            padding: 3rem 1rem;
            color: var(--light-text);
        }

        .empty-state i {
            font-size: 3rem;
            margin-bottom: 1rem;
            color: var(--secondary-color);
        }

        /* 模态窗口样式 */
        .modal-header {
            background-color: var(--primary-color);
            color: white;
        }

        .modal-header .btn-close {
            color: white;
            box-shadow: none;
        }

        /* 弹出确认框样式 */
        .delete-alert {
            color: #721c24;
            background-color: #f8d7da;
            border-color: #f5c6cb;
            font-weight: 500;
            margin-bottom: 1rem;
            padding: 0.75rem 1.25rem;
            border-radius: 0.25rem;
        }

        .project-description {
            margin-top: 0.8rem;
            padding-top: 0.8rem;
            border-top: 1px solid rgba(0, 0, 0, 0.1);
            color: var(--light-text);
            font-size: 0.9rem;
            display: flex;
            align-items: flex-start;
        }

        .project-description i {
            margin-right: 0.5rem;
            margin-top: 0.2rem;
            color: var(--secondary-color);
        }

        .project-description p {
            margin-bottom: 0;
            line-height: 1.4;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }

        .project-description-footer {
            background-color: #f8f9fa;
            border-top: 1px solid rgba(0, 0, 0, 0.1);
            color: var(--light-text);
            font-size: 0.85rem;
            padding: 0.7rem 1rem;
            display: flex;
            align-items: flex-start;
        }

        .project-description-footer i {
            margin-right: 0.5rem;
            margin-top: 0.1rem;
            color: var(--secondary-color);
            flex-shrink: 0;
        }

        .project-description-footer p {
            margin-bottom: 0;
            line-height: 1.4;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }

    </style>
</head>
<body>
    <div class="container-fluid p-0">
        <!-- 页面标题和添加项目按钮 -->
        <div class="page-header">
            <h1 class="page-title">项目列表</h1>
            <button type="button" class="btn btn-primary btn-add-project" data-bs-toggle="modal" data-bs-target="#newProjectModal">
                <i class="bi bi-plus-lg"></i> 创建新项目
            </button>
        </div>

        <!-- 项目列表卡片 -->
        <div class="row" id="projectList">
            <!-- 项目卡片将通过JavaScript动态生成 -->
        </div>

        <!-- 空状态提示 -->
        <div class="empty-state d-none" id="emptyState">
            <i class="bi bi-folder"></i>
            <h4>暂无项目</h4>
            <p>点击"创建新项目"按钮来创建一个新项目</p>
        </div>
    </div>

    <!-- 创建新项目模态窗口 -->
    <div class="modal fade" id="newProjectModal" tabindex="-1" aria-labelledby="newProjectModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="newProjectModalLabel">创建新项目</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="alert alert-info d-flex align-items-center">
                      <i class="bi bi-info-circle-fill me-2"></i>
                      <div>提示：系统将为创建的新项目自动填充默认输入，您可以点击相应的列表项进入项目来进行编辑</div>
                    </div>
                    <form id="newProjectForm" action="{{ url_for('func.AddProject') }}" method="post">
                        <div class="mb-3">
                            <label for="projectName" class="form-label">项目名称</label>
                            <input name="projectname" type="text" class="form-control" id="projectName" placeholder="请输入项目名称" required>
                        </div>
                        <div class="mb-3">
                            <label for="projectCategory" class="form-label">项目类型</label>
                            <select name="projecttype" class="form-select" id="projectCategory" required>
                                <option value="SingleSite">单站点</option>
                                <option value="MultiSite">多站点</option>
                                <option value="Sensitivity">敏感性分析</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="projectDescription" class="form-label">项目描述</label>
                            <textarea name="projectdescription" class="form-control" id="projectDescription" rows="3" placeholder="请输入项目描述（选填）"></textarea>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                            <button type="submit" class="btn btn-primary" id="saveNewProject">提交</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- 删除项目确认模态窗口 -->
    <div class="modal fade" id="deleteProjectModal" tabindex="-1" aria-labelledby="deleteProjectModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteProjectModalLabel">删除项目</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="delete-alert">
                        <i class="bi bi-exclamation-triangle"></i> 警告：确定要永久删除此项目吗？此操作不可恢复
                    </div>
                    <form id="deleteSpeciesForm" action="{{ url_for('func.DeleteProject') }}" method="post">
                        <div class="mb-3">
                          <label for="speciesId" class="form-label">项目唯一标识码</label>
                          <input name="deleteProjectId" type="text" class="form-control" id="speciesId" readonly>
                        </div>
                        <div class="mb-3">
                          <label for="speciesName" class="form-label">项目名称</label>
                          <input name="deleteProjectName" type="text" class="form-control" id="deletespeciesName" readonly>
                        </div>
                        <div class="mb-3">
                          <label for="speciesName" class="form-label">项目类型</label>
                          <input name="deleteProjectType" type="text" class="form-control" id="deletespeciesType" readonly>
                        </div>
                        <div class="mb-3">
                          <label for="speciesName" class="form-label">最近修改时间</label>
                          <input name="deleteProjectCreateTime" type="text" class="form-control" id="speciesCreateTime" readonly>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                            <button type="submit" class="btn btn-danger" id="confirmDeleteProject">删除</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <script>
        const projectsData = [
            {% for project in projects %}
                {
                    id: '{{ project.id }}',
                    name: '{{ project.projectname }}',
                    category: '{% if project.projecttype == "SingleSite" %} 单站点 {% elif project.projecttype == "MultiSite" %} 多站点 {% else %} 敏感性分析 {% endif %}',
                    createdTime: '{{ project.create_time }}',
                    description: '{{ project.description }}'
                },
            {% endfor %},
        ];

        // 当前要删除的项目ID
        let currentDeleteProjectId = null;

        $(document).ready(function() {
            // 初始化项目列表
            renderProjects();
        });

        // 渲染项目列表函数
        function renderProjects() {
            const projectListElem = $("#projectList");
            projectListElem.empty();

            if(projectsData.length > 0) {
                // 隐藏空状态显示
                $("#emptyState").addClass("d-none");

                // 添加项目卡片
                projectsData.forEach((project, index) => {
                    projectListElem.append(`
                        <div class="col-12 col-md-6 col-lg-4 mb-3">
                            <div class="card project-card" data-project-id="${project.id}">
                                <div class="card-body">
                                    <div class="project-header">
                                        <h5 class="project-title">${project.name}</h5>
                                        <div class="project-actions">
                                            <button class="btn btn-outline-danger btn-action btn-delete-project" data-project-id="${project.id}" data-project-name="${project.name}" data-project-category="${project.category}" data-project-create="${project.createdTime}">
                                                <i class="bi bi-trash"></i>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="project-info">
                                        <div class="project-info-item">
                                            <i class="bi bi-hash"></i>
                                            <span>${project.id}</span>
                                        </div>
                                        <div class="project-info-item">
                                            <i class="bi bi-tag"></i>
                                            <span>${project.category}</span>
                                        </div>
                                        <div class="project-info-item">
                                            <i class="bi bi-calendar-event"></i>
                                            <span>${project.createdTime}</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="card-footer project-description-footer">
                                    <i class="bi bi-file-text"></i>
                                    <p>${project.description || '暂无项目描述'}</p>
                                </div>
                            </div>
                        </div>
                    `);
                });

                // 点击项目卡片事件（排除删除按钮）
                $(".project-card").click(function(e) {
                    // 如果点击的是删除按钮，不触发项目点击事件
                    if(!$(e.target).closest('.btn-delete-project').length) {
                        const projectId = $(this).data("project-id");
                        // 这里处理跳转到项目详情页面
                        window.location.href = `/func/enterproject/${projectId}`;
                    }
                });

                // 点击删除按钮事件
                $(".btn-delete-project").click(function(e) {
                    e.stopPropagation(); // 阻止事件冒泡，避免触发项目卡片点击事件
                    const projectId = $(this).data("project-id");
                    const projectName = $(this).data("project-name");
                    const projectCategory = $(this).data("project-category");
                    const projectCreatedTime = $(this).data("project-create");

                    // 设置当前要删除的项目ID和名称
                    currentDeleteProjectId = projectId;

                    // 打开删除确认模态窗口
                    $("#deleteProjectModal").modal("show");
                    $('#speciesId').val(projectId);
                    $('#deletespeciesName').val(projectName);
                    $('#deletespeciesType').val(projectCategory);
                    $('#speciesCreateTime').val(projectCreatedTime);
                });
            } else {
                // 显示空状态
                $("#emptyState").removeClass("d-none");
            }
        }
    </script>
</body>
</html>